<template>
  <a-card class="ax__template TestAx" :body-style="bodyStyle"
          v-if="!testFormConfig.display">
    <a-flex vertical class="h-100">
      <!-- 顶部筛选，查询选项 -->
      <HeadVue/>
      <!-- 表单数据 -->
      <div class="data__content" data-selection-area>
        <TableVue v-if="testTable.viewMode === 'table'" data-selection-exclude></TableVue>
        <CardVue v-else></CardVue>
      </div>
      <!-- 底部分页信息 -->
      <FooterVue></FooterVue>
    </a-flex>
  </a-card>
  <AXForm v-else class="ax__template TestAx"/>
</template>

<script setup lang="ts">
  import {bodyStyle} from '@/global/config/gen';
  import {testList} from './data/curd';
  import {testTable} from './data/table';
  import FooterVue from './pages/footer/AXFooter.vue';
  import HeadVue from './pages/head/AXHead.vue';
  import CardVue from './pages/card/AXCard.vue';
  import AXForm from './form/AXForm.vue';
  import TableVue from './pages/table/AXTable.vue';
  import {testFormConfig} from './data/form';
  import {fetchTestOptions} from './data/options';

  onMounted(async () => {
    await testList();
    await fetchTestOptions();
  });

  onUnmounted(() => {
    testFormConfig.value.display = false;
    testTable.value.reset();
  });
</script>

<style lang="scss" scoped></style>
